<script setup lang="ts">
import { ref } from 'vue'

const food = ref('鸡')

const changeFood = () => {
  food.value = '鸭子'
}

const eatFood = (food: string) => {
  alert(food + '好吃')
}

const testEvent = (e: any, info: string) => {
  console.log(e)
  console.log(info)
}
</script>

<!-- 结构 -->
<template>
  <!-- 内联语句 -->
  <h2 @click="food += '腿'">内联语句-直接写逻辑语句:{{ food }}</h2>

  <!-- 处理函数 -->
  <h2 @click="changeFood">处理函数-适合写一些复杂的逻辑</h2>

  <!-- 调用函数+传递参数 -->
  <h2>吃东西</h2>
  <button @click="eatFood('烤鸭')">吃什么</button>

  <!-- 默认的事件参数 -->
  <!-- 事件触发时,浏览器会默认传递一个 [事件参数] 给函数,内部有很多信息
        触发事件时,如果既要获取默认的事件参数,又要传递自定义的参数
        可以使用 $event 替代默认的参数
        -->
  <button @click="testEvent($event, '666')">测试事件参数</button>
</template>

<!-- 样式 -->
<style scoped></style>
